import React, { Component } from 'react'
import './App.css'
import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'

class App extends Component {
    state = {
        todoList: [
            {
                // 唯一标识
                id: Math.random().toString(36).slice(2),
                // 标题
                title: '卡莎',
                // 是否选中
                isChecked: true
            },
            {
                // 唯一标识
                id: Math.random().toString(36).slice(2),
                // 标题
                title: '格雷福斯',
                // 是否选中
                isChecked: false
            },
            {
                // 唯一标识
                id: Math.random().toString(36).slice(2),
                // 标题
                title: '莎米拉',
                // 是否选中
                isChecked: true
            }
        ]
    }

    // 根据id来给被点击的多选框的checked状态取反
    changeIsCheckedById(itemId) {
        // 使用map方法复制一份状态todoList来做取反操作
        const newTodoList = this.state.todoList.map((item) => {
            if (item.id === itemId) item.isChecked = !item.isChecked
            return item
        })
        this.setState({
            todoList: newTodoList
        })
    }

    // 添加数据函数
    addTodo(e) {
        if (e.keyCode === 13) {
            // 接收写入的数据
            const title = e.target.value.trim()
            // 判断输入是否为空
            if (title.length === 0) {
                alert('不能输入为空')
                return
            }
            // 判断title是否重复
            if (this.state.todoList.find(v => v.title === title)) {
                alert('输入重复 请重新输入')
                return
            }
            // 将输入的数据放到todoList头部
            this.setState({
                todoList: [
                    {
                        id: Math.random().toString(36).slice(2),
                        title,
                        isChecked: false
                    },
                    ...this.state.todoList
                ]
            })
            e.target.value = null
        }
    }
    // 根据ID删除数据
    delTodoById(id) {
        if(window.confirm('确定删除？')) {
            this.setState({
                todoList: this.state.todoList.filter(v=>v.id !==id)
            })
        }
    }
    // 删除所有选中任务
    delAllChecked() {
        this.setState({
            todoList: this.state.todoList.filter(v=>!v.isChecked)
        })
    }
    // 保存数据到localStorage
    componentDidMount() {
        localStorage.setItem('todoList', JSON.stringify(this.state.todoList))
    }


    // 批量更改状态
    changeCheckedAll(isChecked) {
        const todoList = this.state.todoList.map((item) => {
            item.isChecked = isChecked
            return item
        })
        this.setState( {
            todoList
        } )
    }


    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <TodoHeader addTodo={this.addTodo.bind(this)}></TodoHeader>
                    <TodoMain 
                    todoList={this.state.todoList} 
                    changeIsCheckedById={this.changeIsCheckedById.bind(this)}
                    delTodoById={this.delTodoById.bind(this)}
                    ></TodoMain>
                    <TodoFooter 
                    changeCheckedAll={this.changeCheckedAll.bind(this)}  
                    todoList={this.state.todoList}
                    delAllChecked={this.delAllChecked.bind(this)}
                     ></TodoFooter>
                </div>
            </div>
        )
    }
}
export default App